// 上传图片

<template>
  <!-- 展示图 -->
  <div class="item img-item">
    <label for>
      <span class="tips">{{isNecessaryInput ? "*" : ""}}</span>{{labelName}}：
    </label>
    <div class="inline-block">
      <el-form ref="role" class="upload-img-wrap">
        <el-form-item label prop="license">
          <el-upload
            list-type="picture-card"
            :action="upLoadUrl"
            :file-list="fileShowList"
            :on-remove="handleRemove"
            :before-upload="handleUpload"
            multiple
            :limit="limit"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import jhTools from "@/utils/jhTools"; //工具函数
import API from "@/utils/api_config.js"; //引入api

export default {
  components: {},
  props: {
    labelName: {
      type: String
    },
    limitCount: {
      type: String
    },
    imgArrProp: {
      type: String
    },
    isNecessary: {
      type: String
    }
  },
  data() {
    return {
      upLoadUrl: "",
      imgArr: [],
      fileShowList: [],

      isNecessaryInput: false
    };
  },
  mounted() {
    if(this.imgArrProp) {
       var imgArrDefault = this.imgArrProp.split(',');
       this.imgArr = this.fileShowList = imgArrDefault;
       console.log(imgArrDefault);
    }

    this.isNecessaryInput = this.isNecessary ? true : false;     //是否必须字段
  },
  methods: {

    //移除 展示图
    handleRemove(file, fileList) {
      console.log("删除", file, fileList);
      let deleteUrl = file.url;
      let len = this.imgArr.length;
      for (var i = 0; i < this.imgArr.length; i++) {
        if (this.imgArr[i].uid == file.uid) {
          this.imgArr.splice(i, 1);
        }
      }
    },

    //上传 展示图
    handleUpload(file) {
      console.log("file", file);
      var url = API.common.upload;
      let formdata = new FormData();
      formdata.append("file", file);
      var imgs = {
        uid: file.uid,
        name: "",
        url: "",
      };
      jhTools.post(url, formdata, null, (res) => {
        if (res.code == 200) {
          console.log("上传成功", res.data.fullUrl);
          console.log("图片res", res);
          imgs.name = res.data.fullUrl;
          imgs.url = res.data.fullUrl;
          this.imgArr.push(imgs);
          this.fileShowList = this.imgArr;
          var limitCount = this.limit ? +this.limit : 1;
          if (this.imgArr.length == limitCount) {
            //提示限制
            this.$message({
              type: 'success',
               message: `上传成功，最多上传${limitCount}张`,
            });
          }
          this.uploadSuccess(this.imgArr);
        }
      });
      console.log("imgArr", this.imgArr);
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },

    uploadSuccess (imgArr) {
      console.log(imgArr);
      this.$emit('uploadSuccess', imgArr);
    }
  },
};
</script>

<style lang="scss" scoped>
// @import '~styles/mixins.scss';
// @import '~styles/variables.scss';

.img-item {
  display: flex;
  flex-direction: row;

  .upload-img-box {
    overflow: hidden;
    img {
      height: 100%;
    }
  }
}
</style>
